<template>
  <div class="box">
    <!-- 头部 -->
    <div class="header">
      <div class="logo">
        <img src="https://assets-cdn.lanqb.com/lanqb/logo05.png" alt="" />
      </div>
      <div class="right">
        <img
          class="search"
          src="https://assets-cdn.lanqb.com/lanqb/m/header-search.png"
          alt=""
        />
        <div class="register">
          <img
            class="reg-logo"
            src="https://assets-cdn.lanqb.com/pc/login/regster-reward_3.png"
            alt=""
          />
          <div class="reg-text">
            <span>注册&nbsp;&nbsp;</span>
            <span>登录</span>
          </div>
        </div>
      </div>
    </div>
    <!-- banner -->
    <div class="banner">
      <img
        src="https://assets-cdn.lanqb.com/popupv3/2022/jun-ban_m.png"
        alt=""
      />
    </div>
    <!-- 底部tabbar -->
    <div class="tabbar">
      <router-link :to="{ name: 'home' }">
        <img
          src="https://assets-cdn.lanqb.com/imgv3_m/images-icon/nav-h02.svg"
          alt=""
        />
        <p>首页</p>
      </router-link>
      <router-link :to="{ name: 'CourseView' }">
        <img
          src="https://assets-cdn.lanqb.com/imgv3_m/images-icon/nav-c02.svg"
          alt=""
        />
        <p>教程</p>
      </router-link>
      <router-link :to="{ name: 'SchoolView' }">
        <img
          src="https://assets-cdn.lanqb.com/imgv3_m/images-icon/nav-t02.svg"
          alt=""
        />
        <p>网校</p>
      </router-link>
      <router-link to="/dachu">
        <img
          src="https://assets-cdn.lanqb.com/imgv3_m/images-icon/nav-d02.svg"
          alt=""
        />
        <p>大触</p>
      </router-link>
      <router-link :to="{ name: 'CommunityView' }">
        <img
          src="https://assets-cdn.lanqb.com/imgv3_m/images-icon/nav-cm02.svg"
          alt=""
        />
        <p>社区</p>
      </router-link>
    </div>
    <router-view />
  </div>
</template>

<style lang="less">
* {
  padding: 0;
  margin: 0;
  text-decoration: none;
}
.box {
  height: 100vh;
  // overflow-y: scroll;
  &::-webkit-scrollbar {
    display: none;
  }
  // 头部
  .header {
    width: 100vw;
    height: 44px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-around;
    overflow: hidden; // 设置动画前 先把下面溢出来的给隐藏掉
    .logo {
      width: 60%;
      margin-left: 10px;
      img {
        width: 177px;
        height: 27px;
      }
    }
    .right {
      width: 40%;
      height: 44px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .search {
        display: block;
        width: 42px;
        height: 27px;
      }
      // 用到盒子居中
      .register {
        width: 82px;
        height: 44px;
        // display: flex;
        // align-items: center;
        text-align: center;
        line-height: 44px;
        animation: move 2s linear infinite;
        .reg-logo {
          display: inline-block;
          vertical-align: middle;
          width: 82px;
          height: 27px;
        }
        .reg-text {
          height: 44px;
        }
      }
    }
  }
  // 登录注册的动画
  @keyframes move {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-44px);
    }
    100% {
      transform: translateY(0);
    }
  }
  // banner 图片默认有间隙，解决方案第一种:给盒子设置宽高图片高；第二种是直接给图片display:block;
  .banner {
    width: 100vw;
    height: 40px;
    img {
      // display: block;
      height: 40px;
    }
  }
  // 底部
  .tabbar {
    z-index: 100;
    height: 50px;
    background-color: pink;
    position: fixed;
    bottom: 0px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    a {
      &.router-link-exact-active {
        color: rgb(230, 104, 26);
      }
      p {
        font-size: 14px;
        color: black;
      }
    }
    img {
      width: 25px;
      height: 25px;
    }
  }
}

// #app {
//   font-family: Avenir, Helvetica, Arial, sans-serif;
//   -webkit-font-smoothing: antialiased;
//   -moz-osx-font-smoothing: grayscale;
//   text-align: center;
//   color: #2c3e50;
// }

// a {
//   font-weight: bold;
//   color: #2c3e50;

//   &.router-link-exact-active {
//     color: #42b983;
//   }
// }
</style>
